﻿@{
    Layout = null;
    string stockInStatusListJson = System.Text.Json.JsonSerializer.Serialize(
        ViewBag.StockInStatusList ?? new List<Model.WmsDictData>(),
        new System.Text.Json.JsonSerializerOptions
        {
            ReferenceHandler = System.Text.Json.Serialization.ReferenceHandler.IgnoreCycles,
            Encoder = System.Text.Encodings.Web.JavaScriptEncoder.UnsafeRelaxedJsonEscaping
        }
    );
    ViewData["Title"] = "订单详情";
    var orderDetail = ViewData["OrderDetail"] as Model.OmPurchaseOrderDTO;
    // 解析数据字典为 List<WmsDictData>
    var stockInStatusList = ViewBag.StockInStatusList as List<Model.WmsDictData> ?? new List<Model.WmsDictData>();
}


<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入 Element Plus -->
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/element-plus"></script>
<style>
    #app {
        margin-top: 20px;
    }

    /* 基础信息容器 */
    .basic-info {
        background-color: #fff;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
    }

    /* 标签页容器 */
    .tabs-container {
        background-color: #fff;
        box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
        min-height: 400px;
        padding: 20px;
    }

    .demo-tabs > .el-tabs__content {
        padding: 32px;
        color: #6b778c;
        font-size: 32px;
        font-weight: 600;
    }
    /* 附件项 hover 效果 */
    .file-item {
        transition: background-color 0.2s;
    }

        .file-item.bg-light {
            background-color: #e6f7ed;
        }
    .full-width {
        flex: 0 0 100%;
    }
    table td{
        padding:15px;
    }

    table td:nth-child(odd) {
        width: 140px;
        font-family:"Microsoft YaHei", "微软雅黑", sans-serif;
        font-size:15px;
    }
    /* 可选：为偶数列设置默认宽度，避免表格总宽度异常 */
    table td:nth-child(even) {
        width:300px;
        font-size:15px;
        color:limegreen;
        font-weight:bold;
    }

    .copy-icon:hover {
        color: #66b1ff; /* 悬浮时颜色变化 */
    }
</style>
<div id="app">
    <!-- 顶部基础信息区域 -->
    <div class="basic-info">
        <!-- 标题与操作按钮 -->
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="font-weight:bolder; display: flex; align-items: center; gap: 8px;">
                进货单号:@(orderDetail?.UpOrderNo ?? "未获取")
                <!-- 复制图标 -->
                <el-icon class="copy-icon"
                         style="cursor: pointer; font-size: 20px; color: #409eff;"
                         v-on:click="copyOrderNo('@(orderDetail?.UpOrderNo ?? "未获取")')">
                    &#128203; <!-- 复制图标实体，也可替换为 &#10148;（另一种复制样式） -->
                </el-icon>
            </h3>
            <div>
                <el-button>编辑</el-button>
                <el-button>删除</el-button>
                <el-button>停用</el-button>
                <el-button v-on:click="printDialogVisible = true">打印</el-button>
                <el-dropdown>
                    <el-button>更多</el-button>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>操作选项1</el-dropdown-item>
                            <el-dropdown-item>操作选项2</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </div>

        <!-- 图片轮播 + 信息区域 -->
        <div style="display: flex; gap: 20px;">
            <!-- 右侧信息 -->
            <div style="flex: 1;">
                <!-- 基础信息表单（只读） -->
                <div class="asideTable" style="width:80%;display:inline-block">
                    <table class="order-table">
                        <tbody>
                            <tr>
                                <td><span class="order-label">制单人</span></td>
                                <!-- 从 orderDetail 中获取属性，需判断对象非空（避免空引用） -->
                                <td><span>@(orderDetail?.CreateBy ?? "未获取")</span></td>

                                <td><span class="order-label">所在部门</span></td>
                                <td><span>@(orderDetail?.CreateOrgName ?? "未获取")</span></td>

                                <td><span class="order-label">制单时间</span></td>
                                <!-- 日期格式化：需先判断属性非空 -->
                                <td>
                                    <span>
                                        @(orderDetail?.CreateTime != null? orderDetail.CreateTime.Value.ToString("yyyy-MM-dd-HH:mm:ss"): "无时间数据")
                                    </span>
                                </td>
                            </tr>
                            <tr>
                                <td><span class="order-label">进货日期</span></td>
                                <td><span>@(orderDetail?.BuyerDate.ToString("yyyy-MM-dd") ?? "未获取")</span></td>

                                <td><span class="order-label">供应商</span></td>
                                <td><span>@(orderDetail?.SupplierName ?? "未获取")</span></td>

                                <td><span class="order-label">联系人</span></td>
                                <td><span>@(orderDetail?.ContactPerson ?? "未获取")</span></td>
                            </tr>
                            <tr>
                                <td><span class="order-label">联系方式</span></td>
                                <td><span>@(orderDetail?.ContactPhone ?? "未获取")</span></td>

                                <td><span class="order-label">进货部门</span></td>
                                <td><span>@(orderDetail?.BuyerOrgName ?? "未获取")</span></td>

                                <td><span class="order-label">进货人</span></td>
                                <td><span>@(orderDetail?.BuyerBy ?? "未获取")</span></td>
                            </tr>
                            <tr>
                                <td><span class="order-label">备注</span></td>
                                <td colspan="5"><span>@(orderDetail?.Remarks ?? "未获取")</span></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="asideStatu" style="float:right;display:inline-block">
                    <span style="color:#aaa">单据状态</span>
                    <br />
                    <br />
                    @{
                        // 从数据字典匹配状态名称
                        var statusName = stockInStatusList
                        .FirstOrDefault(d => d.Code == orderDetail?.OrderStatus)
                        ?.Name ?? "未知状态";
                    }
                    <h3 style="font-weight:bold">@statusName</h3>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签页区域 -->
    <div class="tabs-container">
        <el-tabs v-model="activeTab">
            <!-- 其他信息 -->
            <el-tab-pane label="其他信息" name="other">
                <div style="margin-top: 20px;">
                    <h4>附件</h4>
                    <!-- 已上传附件列表 -->
                    <div v-for="(file, index) in uploadedFiles"
                         :key="index"
                         class="file-item"
                         :class="{ 'bg-light': hoverIndex === index }"
                         v-on:mouseenter="hoverIndex = index"
                         v-on:mouseleave="hoverIndex = -1"
                         style="display: flex; align-items: center; margin: 10px 0; padding: 8px; border-radius: 4px; cursor: pointer;">
                        <span style="flex: 1;">{{ file.name }}</span>
                        <el-button size="small" type="text" style="color: #ff4d4f;" v-on:click="removeFile(index)">删除</el-button>
                    </div>
                    <!-- 上传按钮 -->
                    <el-upload class="upload-demo"
                               action="https://jsonplaceholder.typicode.com/posts/"
                               v-on:success="handleUploadSuccess"
                               v-on:error="handleUploadError"
                               :file-list="fileList"
                               :auto-upload="true"
                               :show-file-list="false"
                               accept=".doc,.docx,.pdf,.rar,.zip"
                               :limit="10"
                               v-on:exceed="handleExceed">
                        <el-button type="primary">上传附件</el-button>
                    </el-upload>
                    <p style="margin: 10px 0; color: #909399;">支持格式：doc、docx、pdf、rar、zip，单文件最大200MB</p>
                </div>
            </el-tab-pane>

            <!-- 其他标签页 -->
            <el-tab-pane label="入库记录" name="in">入库记录内容</el-tab-pane>
            <el-tab-pane label="出库记录" name="out">出库记录内容</el-tab-pane>
            <el-tab-pane label="盘点记录" name="check">盘点记录内容</el-tab-pane>
            <el-tab-pane label="调拨记录" name="transfer">调拨记录内容</el-tab-pane>
            <el-tab-pane label="进货记录" name="purchase">进货记录内容</el-tab-pane>
            <el-tab-pane label="销售记录" name="sale">销售记录内容</el-tab-pane>
            <el-tab-pane label="库存分布" name="distribution">库存分布内容</el-tab-pane>
            <el-tab-pane label="出入库统计" name="stat">出入库统计内容</el-tab-pane>
            <el-tab-pane label="操作记录" name="log">操作记录内容</el-tab-pane>
        </el-tabs>
    </div>

    <!-- 打印弹窗 -->
    <el-dialog title="打印" v-model="printDialogVisible" width="400px">
        <div style="text-align: center;">
            <img src="https://picsum.photos/120/120?random=10" alt="二维码" style="width: 120px; height: 120px; margin-bottom: 10px;" />
            <div style="margin-bottom: 10px;">HPBH021355</div>
            <el-table :data="printData" style="width: 100%;">
                <el-table-column prop="label" label="项目"></el-table-column>
                <el-table-column prop="value" label="内容"></el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button v-on:click="printDialogVisible = false">取消</el-button>
                <el-button type="primary" v-on:click="handlePrint">打印</el-button>
            </span>
        </template>
    </el-dialog>
</div>
<script>
    const { createApp, reactive, ref } = Vue;
        const {
            ElMessage, ElTabs, ElTabPane,
            ElDropdown, ElDropdownMenu, ElDropdownItem, ElDialog,
            ElTable, ElTableColumn, ElUpload, ElButton, ElInput, ElSwitch, ElForm, ElFormItem,
            ElIcon, // 图标容器组件
            Copy // 复制图标，实际按 Element Plus 图标名称调整
    } = ElementPlus;

    const app = createApp({
        setup() {
            const copyOrderNo = (orderNo) => {
            if (!orderNo || orderNo === "未获取") {
                ElMessage.warning('订单号为空，无法复制');
                return;
            }
            // 调用浏览器剪贴板 API 复制文本
            navigator.clipboard.writeText(orderNo)
                .then(() => {
                    ElMessage.success('订单号已复制到剪贴板');
                })
                .catch((err) => {
                    console.error('复制失败:', err);
                    ElMessage.error('复制失败，请手动复制');
                });
        };

            // ---------- 基础信息 ----------
            const form = reactive({
            });

            // 轮播图片（从.NET模型获取）
            const imgs = ref();

            // ---------- 标签页激活状态 ----------
            const activeTab = ref('other');

            // ---------- 附件上传逻辑 ----------
            const fileList = ref([]);
            const uploadedFiles = ref([
                { name: '文件标签.txt' },
                { name: '文件标签.doc' },
                { name: '文件标签.pdf' },
                { name: '文件标签.txt' },
                { name: '文件标签.doc' },
                { name: '文件标签.pdf' }
            ]);
            const hoverIndex = ref(-1);

            const handleUploadSuccess = (response, file) => {
                uploadedFiles.value.push({
                    name: file.name,
                    url: URL.createObjectURL(file.raw)
                });
                ElMessage.success(`文件 "${file.name}" 上传成功`);
            };

            const handleUploadError = (err, file) => {
                ElMessage.error(`文件 "${file.name}" 上传失败，请重试`);
            };

            const handleExceed = (files) => {
                ElMessage.warning(`最多只能上传10个文件`);
            };

            const removeFile = (index) => {
                uploadedFiles.value.splice(index, 1);
                ElMessage.info(`文件已删除`);
            };

            // ---------- 打印弹窗逻辑 ----------
            const printDialogVisible = ref(false);
            const printData = ref([
                { label: '货品名称', value: '智能智障' },
                { label: '货品类型', value: '电子产品' },
                { label: '规格型号', value: '50*20*30' },
                { label: '所在仓库', value: '仓库一/库位三' }
            ]);

            const handlePrint = () => {
                ElMessage.info('执行打印操作（可结合实际打印逻辑扩展）');
                printDialogVisible.value = false;
            };

            return {
                form,
                copyOrderNo,
                imgs,
                activeTab,
                fileList,
                uploadedFiles,
                hoverIndex,
                handleUploadSuccess,
                handleUploadError,
                handleExceed,
                removeFile,
                printDialogVisible,
                printData,
                handlePrint
            };
        }
    });

    // 注册Element Plus组件
    app.component('ElTabs', ElTabs);
    app.component('ElTabPane', ElTabPane);
    app.component('ElDropdown', ElDropdown);
    app.component('ElDropdownMenu', ElDropdownMenu);
    app.component('ElDropdownItem', ElDropdownItem);
    app.component('ElDialog', ElDialog);
    app.component('ElTable', ElTable);
    app.component('ElTableColumn', ElTableColumn);
    app.component('ElUpload', ElUpload);
    app.component('ElButton', ElButton);
    app.component('ElInput', ElInput);
    app.component('ElSwitch', ElSwitch);
    app.component('ElForm', ElForm);
    app.component('ElFormItem', ElFormItem);
    app.component('ElIcon', ElIcon);
    app.component('Copy', Copy);

    app.use(ElementPlus);
    app.mount('#app');
</script>
